import React, { Component } from 'react'
import './App.scss'
import './icon.css'

// 购物车的例子
export default class App extends Component {
  state = {
    Price:0,//总价
    prentnum:0,//全部数量
    conditionall:true,//全选状态
    data:[
      {
        id:1,
        url:"https://yanxuan-item.nosdn.127.net/78b10ae255c6d1f8c535c1a2cd4a4740.png",
        textname:"女式户外运动防晒皮肤衣",
        preSellPrice:199,
        num:1,
        condition:true
      },
      {
        id:2,
        url:"https://yanxuan-item.nosdn.127.net/d1e1a615c2290a3b806cf98ed0d38cbe.png",
        textname:"男式经典基础牛津纺衬衫",
        preSellPrice:129,
        num:1,
        condition:true
      },  
    ]
  }
  /* 加 */
  handadd = (index)=>{
    // console.log(index)
    let data=this.state.data; 
      ++data[index].num;
      this.setState({
        data:data,
      })
  };
  /* 减 */
  handsub = (index)=>{
    let data=this.state.data;
      --data[index].num;
      this.setState({
        data:data,
      })
  }
  // 总价
  getprice = (parent) =>{
    let price = 0
    this.state.data.map(v=>{
      if(v.condition){
        price+=v.preSellPrice*v.num
      }
      return price
    })
    return price
  };
  // 已选
  getprentnum = ()=>{
    let prentnum = 0;
    this.state.data.map(v=>{
      if(v.condition){
        prentnum += v.num
      }
      return prentnum
    })
    return prentnum
  }
  // 单选
  handtion = (index)=>{
    let data=this.state.data
    let conditionall =true
    data[index].condition=!data[index].condition
    data.map(v=>{
      if(!v.condition){
        conditionall=false
      }
      return conditionall
    })
    this.setState({
      data:data,
      conditionall
    })
  }
  // 全选
  handconditionall = ()=>{
    let data = this.state.data;
    let conditionall =this.state.conditionall
    conditionall= !conditionall
    data.forEach(v=>{
      v.condition=conditionall
      return this.setState({
        data:data,
        conditionall
      })
    })
   
  }
  // 下单
  handturo = ()=>{
   return this.state.data.some(v=>{
     return v.condition
   })
    
  }
  render() {
    return (
      <div className="cart">
          {/* 购物车商品区域 */}
          <div className="cart-list">
          {this.state.data.map((v,index)=>{
            return <div className="cart-list-item" key={v.id}>
              <div className="list-item-left">
                  <i className={"iconfont " + (v.condition?"icon-xuanzhong":"icon-xuanzhongyuandian")} onClick={this.handtion.bind(this,index)}></i>
              </div>
              <div className="list-item-mid">
                <img src={v.url} alt=""/>
              </div>
              <div className="list-item-right">
                <div className="item-right-text">{v.textname}</div>
                <div className="item-right-price">
                  <div className="right-price-left">￥{v.preSellPrice}</div>
                  <div className="right-price-right">
                    <span onClick={this.handadd.bind(this,index)}>+</span>
                    <i>{v.num}</i>
                    <span onClick={this.handsub.bind(this,index)}>-</span>
                  </div>
                </div>
              </div>
            </div>
            })}
          </div>

          {/* 购物车功能区域 */}
          <div className="cart-hoke">
            <div className="cart-hoke-left">
              <i className={"iconfont "+(this.state.conditionall?"icon-xuanzhong":"icon-xuanzhongyuandian")} onClick={this.handconditionall}></i>
              <span>已选({this.getprentnum()})</span>
            </div>
            <div className="cart-hoke-right">
              <div>合计:￥{this.getprice()}</div>
              <div className={this.handturo()?"xiadan":"xiadantur"}>下单</div>
            </div>
          </div>
      </div>
    )
  }
}
